<!--<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'WaterfallDemo',
})
</script>-->
<script lang="ts" setup>
import { useReady } from '@tarojs/taro'
import { reactive, ref } from 'vue'
import getNodeSize, { NodeSize } from './utils/getNodeSize'
let leftNodeSize: NodeSize
let rightNodeSize: NodeSize
let leftList = reactive(['111', '222'])
let height = ref(0)
useReady(() => {
  leftList.push('333')

  init()

  // add()

  getNodeSize('#l').then((size) => {
    height.value = size.height
    console.log('🚀 -- getNodeSize -- size', size)
  })
})
function onClickText() {
  leftList.push('333')
  getNodeSize('#l').then((size) => {
    height.value = size.height
    console.log('🚀 -- getNodeSize -- size', size)
  })
}

function init() {
  leftNodeSize = new NodeSize('#l')
  rightNodeSize = new NodeSize('#r')
}

function add() {
  Promise.all([leftNodeSize.getSize(), rightNodeSize.getSize()]).then(([leftSize, rightSize]) => {
    console.log('🚀 -- Promise.all -- leftSize, rightSize', leftSize, rightSize)
  })
}
</script>
<template>
  <div class="WaterfallLayout">
    <div class="box">
      <div class="l" id="l">
        <div v-for="v of leftList" :key="v" class="item">{{ v }}</div>
      </div>
      <div class="r">
        <div class="item">xxx</div>
      </div>
    </div>
    <button @click="onClickText">add</button>
    <button @click="add">add??</button>
    <div>当前高度{{ height }} </div>
  </div>
</template>

<style lang="scss">
.WaterfallLayout {
  .box {
    display: flex;
  }

  .l {
    flex: 1;
  }

  .r {
    flex: 1;
  }
}
</style>
